<template>
<div class="anchorLocation">
    <div v-for="(item,index) in modules">
        <el-button :class="{'active':active == index}" @click="goAnchor('#anchor'+(index+1))" style="padding: 5px;margin:5px">{{item}}</el-button>
    </div>
    <!--<el-timeline>-->
    <!--<el-timeline-item v-for="(item,index) in modules" :key="index">-->
    <!--<el-button @click="goAnchor('#anchor'+index)" style="padding: 5px;margin:5px">{{item}}</el-button>-->
    <!--</el-timeline-item>-->
    <!--</el-timeline>-->
</div>
</template>

<script>
export default {
    name: "anchor-location",
    props: {},
    data: function () {
        return {
            modules: [
                "保单信息",
                "报案信息",
                "立案基本信息",
                "理算责任信息",
                "计算书",
                "备注说明",
                "生成计算书",
                "领款人登记信息",
                "本次赔款合计",
                "结案选项",
                "理算意见",
                "核赔轨迹",
                "审批意见",
            ],
            isScroll: false,
            itemTab: [],
            active: 1
        };
    },
    computed: {},
    watch: {},
    mounted() {
        window.addEventListener("scroll", this.handleScroll, true); // 监听（绑定）滚轮滚动事件
        for (let i = 0; i < this.modules.length; i++) {
            //循环获取的list中标题的位置
            //补充：list中存放的是标题的id数组
            let ele = document.getElementById("anchor" + (i + 1));
            this.itemTab.push(ele.offsetTop);
            //获取位置后添加到itemTab数组
        }
    },
    methods: {
        goAnchor(selector) {
            let anchor = this.$parent.$el.querySelector(selector);
            document.documentElement.scrollTop = anchor.offsetTop;
        },
        handleScroll() {
            if (document.documentElement.scrollTop > 0) {
                this.isScroll = true;
            } else {
                this.isScroll = false;
            }
            let ws = window.scrollY; //当前滚动条位置
            this.itemTab.forEach((item, index) => {
                //循环检测每个标题的位置
                if (ws > item - 50) {
                    //判断当前滚动条大于
                    this.active = index; //将最后一个大于item的下标赋值给active
                    //active是当前滚动条对应的标题位置
                }
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.anchorLocation {
    position: fixed;
    z-index: 100;
    right: -5px;
    transition: all 1s;
}

.el-button {
    border: unset;
    background: transparent;

}

.active {
    color: #409EFF;
    // border-color: #c6e2ff;
    // background-color: #ecf5ff
}
</style>
